<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="commonJS::commonJsCss('计费帐单查询')">
    <title>计费帐单查询</title>
</head>
<body ng-app="billingBillApp" ng-controller="billingBillCtrl" ng-init="init()">
<!--通用头部-->
<div th:replace="head::header" ></div>
<div th:replace="menu::menu" ></div>
<div style="height: 91%">
    <div class="form-query">
        <table class="div_form_table">
            <tr>
                <td class="div_form_middle_title" style="text-align: left;">
                    查询月份：
                    <input id="billingCycle" name="billingCycle" size="25" type="text" class="Wdate"
                           onclick="WdatePicker({dateFmt:'yyyy-MM',onpicked:function(){$(this).trigger('change')}})"
                           data-ng-model="billingCycle" readonly/>
                    合同用户：
                    <select id="contractUserSel" style="width: 150px;height: 30px;">
                        <option value=""><--请选择&ndash;&gt;</option>
                        <option th:each="contractUser : ${contractUserList}" th:value="${contractUser.contractUserId}" th:text="${contractUser.userAbbrev}" />
                    </select>
                    <button class="form-btn-edit" data-ng-click="loadBillingBill()">查询</button>
                    <button class="form-btn-insert" data-ng-click="exportExcel()">导出</button>
                    <button class="form-btn-insert" data-ng-click="editBillingBill()" data-ng-show="isSuperAdmin">保存</button>
                    <span data-ng-show="false" id="span_superAdmin" sec:authentication="principal.superAdmin"></span>
                </td>
            </tr>
        </table>
    </div>

    <div class="form-table" style="width: 88%;min-height: 93%;">
        <!--表格+条件查询+关联+分页-->
        <div class="billingrule_table_div">
            <div class="form-table" style="margin: 20px;" id="printpart">
                <!--表格加分页：inline-block使分页在表格下-->
                <div class="page-in-table">
                    <!--表格-->
                    <table class="efbtable">
                        <thead>
                        <tr>
                            <th class="efbth" style="width: 5%">序号</th>
                            <th class="efbth" style="width: 10%">用户名称</th>
                            <th class="efbth" style="width: 10%">账单周期</th>
                            <th class="efbth" style="width: 15%">明细文档</th>
                            <th class="efbth" style="width: 10%">账单金额</th>
                            <th class="efbth" style="width: 10%">执行金额</th>
                            <th class="efbth" style="width: 15%">执行账单文档</th>
                            <th class="efbth">备注</th>
                            <th class="efbth" style="width: 10%" data-ng-show="isSuperAdmin">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody_billingBills">
                        <tr ng-repeat="billingBill in billingBills" name="insertBillingBills_tr">
                            <td class="efbTable-border">
                                <span>{{billingBill.index}}</span>
                                <input type="text" name="idValue" data-ng-show="false" data-ng-model="billingBill.id"/>
                            </td>
                            <td class="efbTable-border"><span>{{billingBill.contractUserAbbrev}}</span></td>
                            <td class="efbTable-border"><span>{{billingBill.billingCycle}}</span></td>
                            <td class="efbTable-border">
                                <a data-ng-click="exportFile(billingBill.billingFileName,billingBill.billingFile)">{{billingBill.billingFileName}}</a>
                            </td>
                            <td class="efbTable-border"><span>{{billingBill.billingAmount}}</span></td>
                            <td class="efbTable-border">
                                ¥ <input type="text" name="executeAmountValue" data-ng-model="billingBill.executeAmountStr" onfocus="hilite(this);" onblur="delite(this);" maxlength="10" style="width:70%;" oninput="this.value=this.value.replace(/[^0-9\.]/g,'')" ng-disabled="!isSuperAdmin"/>
                            </td>
                            <td class="efbTable-border">
                                <a data-ng-click="exportFile(billingBill.executeFileName,billingBill.executeFile)">{{billingBill.executeFileName}}</a>
                            </td>
                            <td class="efbTable-border">
                                <input type="text" name="remarkValue" data-ng-model="billingBill.remark" onfocus="hilite(this);" onblur="delite(this);" maxlength="100" style="width:70%;" ng-disabled="!isSuperAdmin"/>
                            </td>
                            <td class="efbTable-border" data-ng-show="isSuperAdmin"><button class="form-btn-edit" data-ng-click="toUploadExecuteFile(billingBill.id)">上传</button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分页 :共用page.html-->
                <div th:replace="newPage::newPagehtml"></div>
            </div>
        </div>
    </div>

    <!--上传执行账单文档-->
    <div class="modal fade" tabindex="-1" role="dialog" id="editExecuteFileModal">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal" method="post" enctype="multipart/form-data" id="updateExecuteFileForm" ng-submit="submitExecuteFileForm()">
                <div class="modal-content">
                    <div class="modal-header modal-header-efb">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title modal-title-efb">上传执行账单</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row-fluid">
                            <div class="span12">
                                <input type="text" data-ng-show="false" id="id" name="id" data-ng-model="id"/>
                                <table class="div_form_table">
                                    <tr>
                                        <td class="div_form_middle_title">
                                            执行账单文档&nbsp;&nbsp;:&nbsp;&nbsp;
                                        </td>
                                        <td class="div_form_middle_other">
                                            <input type="file" id="executeFile" name="executeFile" data-ng-model="executeFile" maxlength="200" style="width:50%;" accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer modal-footer-efb">
                        <button class="form-btn-edit" type="submit" id="submitBtn">确定</button>
                        <button type="button" class="form-btn-cancel" data-ng-click="closeUploadExecuteFile()">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--通用尾部-->
<div th:replace="footer::footer" ></div>
</body>
<script type="text/javascript" th:src="@{/js/billingBill/BillingBillModule.js}"></script>
<script type="text/javascript" th:src="@{/js/common/cookieUtil.js}"></script>
<script type="text/javascript" th:src="@{/js/billingBill/BillingBillService.js}"></script>
<script type="text/javascript" th:src="@{/js/billingBill/BillingBillController.js}"></script>
<!--时间插件-->
<script type="text/javascript" th:src="@{/js/My97DatePicker/WdatePicker.js}" charset="UTF-8"></script>
<script th:inline="javascript">
    var type = [[${contractUserList}]];
    if(type.length == 1){
        $("#contractUserSel").val(type[0].contractUserId);
    }

    function hilite(obj) {
        obj.style.border = '2px solid #000000';
    }
    function delite(obj) {
        obj.style.border = '2px solid #ffffff';
    }
</script>
</html>